<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小视频贩卖网</title>
  <!-- icon -->
  <link rel="stylesheet" href="/static/css/common/fonts/iconfont.css">
  <!-- logo图标 -->
  <link rel="icon" href="/static/favicon.ico" type="image/iconx">
  <!-- 消除浏览器差异 -->
  <link rel="stylesheet" href="/static/css/common/reset.css">
  <!-- 要写的CSS -->
  <link rel="stylesheet" href="/static/css/personal.css">
</head>
<body>
  <div id="root" :style="{backgroundColor: !isSingnedin ? 'rgba(242, 242, 242, 1)' : '#fff'}">
    <!-- header -->
    <header class="header">
      <section class="left">
        <a href="/" style="color: #fff">
          <img src="/static/images/favicon.ico" class="logo">
          <span class="title">小视频贩卖网</span>
        </a>
      </section>

      <section class="tab">
        <div class="tab-item">
          <a href="/type?id=592c253d3a322270d55a0b9f" class="item">课程</a>
        </div>
        <div class="tab-item">
          <a href="javascript:;" class="item" @click="payFor">付费咨询</a>
        </div>
      </section>

      <section class="right">
        <a href="/order">
          <div class="shopcar">
            <i class="iconfont icon-gouwuche"></i>
            <span class="title">购物车</span>
          </div>
        </a>
        <div class="sign" v-if="!isSingnedin">
          <span class="signin"
            @click="signin">登录</span>
          <span class="signup"
            @click="signup">注册</span>
        </div>
        <div class="sign loging" v-if="isSingnedin">
          <div class="personal-wrapper">
            <img :src="user.avatar" width="40" height="40">
          </div>
          <div class="information-wrapper">
            <div class="first">
              <div class="left-wrapper">
                <img :src="user.avatar" width="75" height="75">
              </div>
              <div class="right-wrapper">
                <h3 class="name">{{ user.username }}</h3>
              </div>
            </div>
            <div class="second">
              <div class="block-wrapper">
                <a href="/personal?type=course" class="shopcar">我的课程</a>
                <a href="/order" class="shopcar">我的订单</a>
                <a href="/personal" class="shopcar">个人设置</a>
              </div>
            </div>
            <div class="signout">
              <a :href="'/v1/api/user/logout/'+user._id" class="out">安全退出</a>
            </div>
          </div>
        </div>
      </section>

      <section class="form-wrapper">
        <form action="" class="form-item">
          <div class="form-control">
            <input type="text" name="search" class="input-content">
            <button type="submit" class="submit">
              <i class="iconfont icon-sousuo-sousuo"></i>
            </button>
          </div>
        </form>
      </section>

    </header>
    <div id="personal-wrapper" v-if="isSingnedin">
      <div class="heading">
        <div class="left">
          <img :src="user.avatar" :alt="user.username" width="180" height="180">
          <span class="setting"
            @click.stop="pageIndex=0"><i class="iconfont icon-shezhi"></i></span>
          <input class="file-select" type="file" @change="changeAvatar">
        </div>
        <div class="right">
          <h2 class="nickname">{{ user.username }}</h2>
          <p class="desc">{{ user.gender | fitGender }} {{ user.job | fitJob }}</p>
          <p class="summary">{{ user.summary }}</p>
        </div>
      </div>

      <div class="personal-center">
        <div class="tab-menu" :style="{top: fixTop}">
          <ul class="menu">
            <li class="tab" :class="{active:pageIndex===0}" @click="pageIndex=0">
              个人信息
            </li>
            <li class="tab" :class="{active:pageIndex===1}" @click="pageIndex=1">
              我的课程
            </li>
            <li class="tab" :class="{active:pageIndex===2}" @click="goToOrder">
              我的订单
            </li>
          </ul>
        </div>

        <div class="center-content">
          <div class="personal-setting" v-if="pageIndex===0">
            <h2 class="personal-heading">
              个人信息
              <span class="edit" @click="editUser">修改</span>
            </h2>

            <div class="content">
              <form>
                <div class="edit-control">
                  <label class="title" for="name">姓名</label>
                  <input type="text" name="name" v-model="user.name">
                </div>
                <div class="edit-control">
                  <label class="title" for="job">职位</label>
                  <input type="text" name="job" v-model="user.job">
                </div>
                <div class="edit-control">
                  <label class="title" for="gender">性别</label>
                  <input type="radio" name="gender" value="0" v-model="user.gender">男
                  <input type="radio" name="gender" value="1" v-model="user.gender">女
                  <input type="radio" name="gender" value="2" v-model="user.gender">保密
                </div>
                <div class="edit-control">
                  <label class="title" for="summary">简介</label>
                  <textarea name="summary" v-model="user.summary"></textarea>
                </div>

              </form>
            </div>
          </div>
          <div class="personal-course" v-if="pageIndex===1">
            <h2 class="personal-heading">
              我的课程
            </h2>

            <div class="course-wrapper">
              <ul class="course-list">
                <li class="course-item" v-for="(vedio, i) of ownVdeios">
                  <div class="left">
                    <a :href="'/vedio?id=' + vedio._id">
                      <img :src="vedio.avatar" :alt="vedio.title" class="post" width="220" height="140">
                    </a>
                  </div>
                  <div class="right">
                    <h3 class="title">{{ vedio.title }}</h3>
                    <p class="total-time">时长 {{ totaltimes[i] }}</p>
                    <p class="desc">更新至 第{{ vedio.children.length }}章</p>
                  </div>
                  <a :href="'/vedio?id=' + vedio._id">
                    <div class="continue">继续学习</div>
                  </a>
                </li>
                <li class="info" v-if="!ownVdeios.length">您还没有课程哦, 快去购买吧:(</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="need-for-signin" v-if="!isSingnedin">
      <img src="/static/system/need-for-signin.png">
    </div>

    <footer class="footer">

      <div class="footer-wrapper">
        <div class="first-line">
          <a href="https://github.com/lastIndexOf" class="github">
            <i class="iconfont icon-github"></i>
          </a>
        </div>
        <div class="second-line">
          <a href="https://github.com/lastIndexOf/E-commerce.git" class="about-us">文档链接</a>
          <a href="javascript:;"
            class="about-us"
            @click="aboutUs">关于我们</a>
        </div>
        <div class="last-line">
          @made by 郑凡恺， 冯博， 章焕
        </div>
      </div>
    </footer>
    <div class="to-top"
      v-show="isShow"
      @click="toTop">
      <i class="iconfont icon-fanhuidingbu"></i>
    </div>
  </div>

  <script src="/static/js/bundles/personal.js"></script>
</body>
</html>
